<template>
    <div class="city">
        <header>
            <my-top>
                <template v-slot:a>
                    <span @click="$router.back()"><i class="iconfont icon-xiangzuojiantou ok"></i></span>
                </template>
                 <template v-slot:b>
                    <span>
                        城市选择
                    </span>
                </template>
            </my-top>
            <div class="search">
                <input class="search-input" type="text" placeholder="输入城市名或拼音" />
            </div>
        </header>
        <city-list :hotCity="hotCity" :cities="cities"></city-list>
        <bs-scroll :cities="cities"></bs-scroll>
    </div>
</template>
<script>
import axios from "axios";
import myTop from "./myTop";
import cityList from "./son/cityList"
import BsScroll from "./son/BsScroll"
export default {
  data() {
    return {
        hotCity:[],
        cities:{}
    };
  },
  components: {
    myTop,
    cityList,
    BsScroll
  },
  mounted() {
    axios.get('/static/city.json').then(res=>{
        const req = res.data.data
        console.log(req);
        this.hotCity = req.hotCities
        this.cities = req.cities
       console.log( Object.keys(this.cities));
       console.log(this.cities);
       
    })
  },
};
</script>
<style lang="scss" scoped>
.city{
    width: 100%;
    height: 100vh;
    background-color: #ebebeb;
}
header {
  width: 100%;
  height: 1.7rem;
  background: #07abc5;
  .search{
    width: 100%;
    height: .9rem;
    text-align: center;
    line-height: .9rem;
  }
  .search-input{
    width: 7.2rem;
    height: .6rem;
    border-radius: .1rem;
    text-align: center;
  }
}
</style>
